<style scoped>

  .el-form-item {
    margin-bottom: 18px !important;
  }

  .clearfix {
    display: flex;
    justify-content: space-between; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }

  .el-card__header {
    padding: 10px 20px !important;
  }

  .ml-25 {
    margin-left: 40px;
  }

  .row >>> .el-divider--horizontal {
    margin: 10px 0;
  }

  .row >>> .el-card__header {
    padding: 8px 24px;
  }

  .row >>> .el-card {
    margin-top: 15px;
  }

  .row >>> .el-upload-list__item {
    width: 100px;
    height: 100px;
  }

  .row >>> .el-upload--picture-card {
    width: 100px;
    height: 100px;
    line-height: 100px;
  }

  .uplold >>> .el-upload-list__item {
    transition: none;
  }

  .test {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    opacity: 0;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 20px;
  }

  .file_card >>> .el-upload-list__item-actions {
    height: 20%;
    font-size: 10px;
  }

  .file_card >>> .el-upload-list__item-thumbnail:hover .test {
    opacity: 1;
  }
</style>
<template>
  <div>
    <el-row :gutter="0">
      <el-col :span="22" >
        <el-page-header @back="goBack" :content="addtitle" title="返回"></el-page-header>
      </el-col>
      <el-col :span="2">
        <el-button size="medium" type="success" plain icon="el-icon-finished" @click="submitForm('form')"
                   :disabled="isedit">保存
        </el-button>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="10">
      <el-col :span="8" style="background-color: #fff">
        <el-radio-group v-model="form.parenttype" @change="gettype" class="ml-25  " :disabled="radio">
          <el-radio label="1">论文著作</el-radio>
          <el-radio label="2">项目</el-radio>
          <el-radio label="3">专利</el-radio>
          <el-radio label="4">其他</el-radio>
        </el-radio-group>

        <el-form  :disabled="isedit" ref="form" :model="form" label-width="100px" class="mt-10"
                 v-if="form.parenttype == '1'||form.parenttype == '4'">
          <el-form-item label="类型：">
            <el-select v-model="form.type" placeholder="请选择成果类型" style="width: 100%">
              <el-option
                v-for="item in resultType"
                :key="item.rtId"
                :label="item.resultType"
                :value="item.rtId">
              </el-option>

            </el-select>
          </el-form-item>
          <el-form-item label="名称：">
            <el-input v-model="form.title" size="medium" clearable placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item label="形式：">
            <el-radio-group v-model="form.form" @change="isorganization">
              <el-radio label="1">个人</el-radio>
              <el-radio label="2">组织</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="负责人：">
            <el-input v-model="form.username" size="medium" clearable placeholder="请输入负责人名字"></el-input>
          </el-form-item>
          <el-form-item label="组织成员：" v-if="isorgin">
            <el-input v-model="form.member" size="medium" clearable placeholder="请输入项目组员中间用 ' ，' 隔开"></el-input>
          </el-form-item>
          <el-form-item label="领域：">
            <el-input v-model="form.field" size="medium" clearable placeholder="请输入成果领域"></el-input>
          </el-form-item>
          <el-form-item label="等级：">
            <el-select v-model="form.grades" placeholder="请选择成果类型" style="width: 100%">
              <el-option
                v-for="item in grades"
                :key="item.rtId"
                :label="item.grades"
                :value="item.rtId">
              </el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="备注：">
            <el-input type="textarea" v-model="form.remarks" clearable></el-input>
          </el-form-item>
          <!--          <el-form-item>-->
          <!--            <el-button type="primary" @click="onSubmit">立即创建</el-button>-->
          <!--            <el-button>取消</el-button>-->
          <!--          </el-form-item>-->
        </el-form>
        <el-form ref="form" :model="form" label-width="100px" class="mt-10" v-if="form.parenttype == '2'">
          <el-form-item label="类型：">
            <el-select v-model="form.type" placeholder="请选择成果类型" style="width: 100%">
              <el-option
                v-for="item in resultType"
                :key="item.rtId"
                :label="item.resultType"
                :value="item.rtId">
              </el-option>

            </el-select>
          </el-form-item>
          <el-form-item label="项目名称：">
            <el-input v-model="form.title" size="medium" clearable placeholder="请输入项目名称"></el-input>
          </el-form-item>
          <el-form-item label="形式：">
            <el-radio-group v-model="form.form" @change="isorganization">
              <el-radio label="1">个人</el-radio>
              <el-radio label="2">组织</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="负责人：">
            <el-input v-model="form.username" size="medium" clearable placeholder="请输入负责人名字"></el-input>
          </el-form-item>
          <el-form-item label="项目成员：" v-if="isorgin">
            <el-input v-model="form.member" size="medium" clearable placeholder="请输入项目组员中间用 '，' 隔开"></el-input>
          </el-form-item>
          <el-form-item label="项目领域：">
            <el-input v-model="form.field" size="medium" clearable placeholder="请输入项目组员中间用 '，' 隔开"></el-input>
          </el-form-item>
          <el-form-item label="项目等级：">
            <el-select v-model="form.grades" placeholder="请选择成果类型" style="width: 100%">
              <el-option
                v-for="item in grades"
                :key="item.rtId"
                :label="item.grades"
                :value="item.rtId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目经费：">
            <el-input v-model="form.funds" size="medium" clearable placeholder="请输入项目经费"></el-input>
          </el-form-item>

          <el-form-item label="项目描述：">
            <el-input type="textarea" v-model="form.remarks" clearable></el-input>
          </el-form-item>

        </el-form>
        <el-form ref="form" :model="form" label-width="100px" class="mt-10" v-if="form.parenttype == '3'">
          <el-form-item label="类型：">
            <el-select v-model="form.type" placeholder="请选择成果类型" style="width: 100%">
              <el-option
                v-for="item in resultType"
                :key="item.rtId"
                :label="item.resultType"
                :value="item.rtId">
              </el-option>

            </el-select>
          </el-form-item>
          <el-form-item label="专利名称：">
            <el-input v-model="form.title" size="medium" clearable placeholder="请输入专利名称"></el-input>
          </el-form-item>

          <el-form-item label="发明人：">
            <el-input v-model="form.username" size="medium" clearable placeholder="请输入发明人 多个发明人中间以' , '隔开"></el-input>
          </el-form-item>
          <el-form-item label="专利权人：">
            <el-input v-model="form.patentee" size="medium" clearable placeholder="请输入专利权人"></el-input>
          </el-form-item>
          <el-form-item label="专利编号：">
            <el-input v-model="form.patentNumber" size="medium" clearable placeholder="请输入专利名称"></el-input>
          </el-form-item>

          <el-form-item label="专利申请日：">
            <el-date-picker placeholder="专利申请日" v-model="form.applydate" style="width: 100%;"></el-date-picker>

          </el-form-item>

          <el-form-item label="项目描述：">
            <el-input type="textarea" v-model="form.remarks" clearable></el-input>
          </el-form-item>
        </el-form>
      </el-col>

      <el-col :span="1">&nbsp;</el-col>
      <el-col :span="15" style="background-color: #fff">
        <el-row class="uplold">
          <el-col :span="24">
            <el-upload
              class="upload-demo"
              ref="upload"
              :action="uploadUrl"
              :http-request="myUpload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="uploadSuccess"
              :on-error="uploadError"
              :before-upload="beforeUpload"
              multiple
              :limit="45"
              :on-exceed="handleExceed"
              :file-list="fileList"
              :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary"  :disabled="isedit" >选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload"  :disabled="isedit">上传</el-button>
              <div slot="tip" class="el-upload__tip">支持上传所有文件格式，可以上传多个</div>
            </el-upload>
          </el-col>
          <el-col :span="24" class="row">
            <el-card class="box-card" shadow="never">
              <div v-if="imgList.length <= 0" style="text-align: center;font-size: 15px;color: #8c939d">暂无添加任何文件</div>
              <div slot="header" class="clearfix">
                <span>已传附件</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="refreshFile">刷新预览</el-button>
              </div>
              <!--        图片-->
              <ul class="el-upload-list el-upload-list--picture-card">
          <span v-for="img in imgList">
            <el-tooltip
              class="item"
              effect="light"
              :hide-after="2000"
              :content="img.name"
              placement="bottom-start">
            <li tabindex="0" class="el-upload-list__item is-ready"
                v-if="img.type=='jpg'|img.type=='png'|img.type=='jpeg'">
              <img class="el-upload-list__item-thumbnail" :src="img.url">
              <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="imgCheck(img.url)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span class="el-upload-list__item-delete" @click="imgDonwload(img.url)">
                    <i class="el-icon-download"></i>
                  </span>
              </span>
            </li></el-tooltip>
          </span>
              </ul>
              <!--        文件file-->
              <span class="file_card">
            <ul class="el-upload-list el-upload-list--picture-card">
            <span v-for="img in imgList">
              <el-tooltip
                class="item"
                effect="dark"
                :hide-after="2000"
                :content="img.name"
                placement="bottom-start">
                <li tabindex="0" class="el-upload-list__item is-ready"
                    v-if="img.type=='docx'|img.type=='doc'|img.type=='xls'|img.type=='xlsx'">
                  <div class="demo-image__preview el-upload-list__item-thumbnail">
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="img.fileImgUrl[0]"
                      :preview-src-list="img.fileImgUrl">
                    </el-image>
                    <span class="test" @click="fileDonwload(img.url)">
                      <i class="el-icon-download"></i>
                    </span>
                  </div>
                </li>
              </el-tooltip>
            </span>
          </ul>
          </span>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </el-card>
          </el-col>
        </el-row>

        <el-row style="margin-top: 40px;" v-if="form.comment!=null&&form.comment!=''">
          <label><span>评语：</span></label>
          <el-row class="uplold" style="margin-top:10px;border: 1px solid #ddd7e2;padding-top:20px;padding-bottom: 20px ;border-radius: 10px;padding-left: 10px;padding-right: 5px">

            <span>{{form.comment}}</span>
          </el-row>


        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    export default {
        name: "addachievements",
        data() {
            return {
                imgList: [],
                uploadUrl: this.URL.api + "upload/file",
                addtitle: "添加成果",
                resultType: [],
                activeIndex: '1',
                radio: false,
                isedit: false,
                dialogImageUrl: '',
                isorgin: false,

                grades: [
                    {id: "1", label: "社团"},
                    {id: "1", label: "班级"},
                    {id: "2", label: "院级"},
                    {id: "3", label: "校级"},
                    {id: "3", label: "县级"},
                    {id: "4", label: "市级"},
                    {id: "5", label: "省级"},
                ],
                urldata: [
                    {url: "achievement/addAchThesis"},
                    {url: "achievement/addAchProject"},
                    {url: "achievement/addAchPatent"},
                    {url: "achievement/addAchOther"},
                ],
                fileList: [],
                dialogVisible: false,
                disabled: false,
                form: {
                    parenttype: "1",
                    type: "",
                    title: '',
                    form: "1",
                    username: "",
                    member: "",
                    grades: "",
                    field: "",
                    college: '',
                    remarks: "",
                    uid: "",
                    patentee: "",
                    patentNumber: "",
                    applydate: "",
                    clazzId: "",
                    funds: '',
                  comment: '',
                  uploadFileList: [],
                },
                LookFlag: "add",
                listType: [
                    'xls',
                    'xlsx',
                    'png',
                    'jpg',
                    'jpeg',
                    'doc',
                    'docx',
                    'ppt',
                    'pptx',
                    'rar',
                    'zip',
                ],

            };
        },
        methods: {
            goBack() {
                //console.log('go back');
                this.$router.go(-1);
            },
            isorganization() {

                this.isorgin = this.form.form == '1' ? false : true
            },
            gettype() {
                var self = this
                this.form.type = ""
                this.form.grades = ""
                this.$http.get(this.URL.api + "achievement/querybytypeid/" + self.form.parenttype).then(res => {
                    self.resultType = res.data.data
                }).catch(res => {
                })
            },
            submitForm(formName) {
                var self = this;
                this.$refs[formName].validate((valid) => {


                    if (valid) {
                        if (this.addtitle === '添加成果') {
                            this.$http.post(this.URL.api + this.urldata[this.form.parenttype - 1].url, self.form)
                                .then(res => {
                                    if (res.data.flag) {
                                        this.$message({
                                            message: '添加成功',
                                            type: 'success'
                                        });

                                    } else {
                                        this.$message.error(res.data);
                                    }


                                })
                        } else {
                            this.$http.put(this.URL.api + this.urldata[this.form.parenttype - 1].url, self.form)
                                .then(res => {
                                    if (res.data.flag) {
                                        this.$message({
                                            message: '添加成功',
                                            type: 'success'
                                        });

                                    } else {
                                        this.$message.error(res.data);
                                    }


                                })
                        }
                    } else {

                        return false;
                    }
                });
            },


            deleteFile(url, id) {
                this.$http.post(this.URL.api + 'upload/deleteFile',
                    this.qs.stringify({fileurl: url}))
                    .then(re => {
                        this.selAllFileImg();
                    });
            },
            handleRemove(file, fileList) {
                if (file.response == undefined) {
                    //console.log(file.fileId)
                    this.deleteFile(file.url, file.fileId)
                } else {
                    //console.log(file.response.data.id)
                    this.deleteFile(file.response.data.url, file.response.data.id)
                }
            },
            handlePreview(file) {
                console.log(file);
            },
            form3_radioClick(e) {
                console.log(e)
            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            data_change(e) {
                console.log(e)
            },
            uploadSuccess(response, file, fileList) {
                if (file.response.flag) {
                    this.selAllFileImg()
                    //this.UploadFileList = this.UploadFileList + ";" + file.response.data.id
                }
            },
            uploadError(err, file, fileList) {
                //console.log(err)
                console.log("失败")
            },
            beforeUpload(file) {
                console.log(file)
                var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
                var extension1 = false;
                this.listType.forEach(re => {
                    if (testmsg == re)
                        extension1 = true;
                })
                if (!extension1) {
                    this.$message({
                        message: '上传文件类型只能是文档、图片或压缩文件!',
                        type: 'warning'
                    });
                }
                return extension1;
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 15 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            imgDonwload: function (img) {
                console.log("imgDonwload:" + img);
                window.location.href = this.URL.api + "upload/testDownload?file=" + img;
            },
            imgCheck(img) {
                console.log("imgCheck:" + img)
                this.dialogImageUrl = img;
                this.dialogVisible = true;
            },
            fileDonwload(img) {
                console.log("fileDonwload:" + img)
                window.location.href = img;
            },
            myUpload(content) {
                console.dir(content)
                let formData = new FormData();
                formData.append('file', content.file);
                formData.append('userId', this.UserInfo.getUserInfo().uid);
                this.$http.post(content.action, formData, {
                    headers: {
                        "Content-Type": "multipart/form-data"
                    },
                    onUploadProgress: progressEvent => {
                        let percent = (progressEvent.loaded / progressEvent.total * 99) | 0
                        content.onProgress({percent: percent})
                    }
                }).then((res) => {
                    if (res.data.flag) {
                        content.onSuccess(res.data)
                    } else {
                        content.onError(res.data)
                    }
                }).catch((err) => {
                    content.onError()
                });
            },
            selAllFileImg: function () {
                console.log("1111")
                var self = this;
                self.$http.post(self.URL.api + "upload/selAllFileUrlByUserId", self.qs.stringify({
                    userId: this.UserInfo.getUserInfo().uid,
                    taskId: self.$route.query.id==undefined?"add":self.$route.query.id
                }))
                    .then(function (response) {
                        self.form.uploadFileList = [];
                        self.imgList = response.data.data;
                        self.imgList.forEach(re => {
                            self.form.uploadFileList.push(re.fileId);
                        })
                    })
                    .catch(function (error) {

                    });

            },
            MyMessage(msg, type) {
                this.$message({
                    message: msg,
                    type: type
                });
            },
            refreshFile() {
                console.log("1111")
                this.selAllFileImg();
            },
          downfiles(){
            if (this.imgList.length != 0) {
              window.location.href = this.URL.api + "upload/Downloadbatch/" + this.form.uid + "/" + this.form.id + "/" + this.form.username;

              return;
            }
            this.$message.error("没有文件");
          }

        },
        created() {


        }
        ,
        mounted: function () { //mounted　表示这个 Vue 对象加载成功了\
            this.form.college = this.UserInfo.getUserInfo().college;
            this.form.clazzId = this.UserInfo.getUserInfo().clazzId
          var self = this;

            //删除用户上传后没有保存的文件
            this.$http.delete(this.URL.api + "upload/deletefilebyUid/" + this.$cookie.get("userid")).then(res => {
            })


            if (this.$route.query.id != null) {
              var dataid = this.$route.query.id;
                this.radio = true
                this.addtitle = this.$route.query.title;
                //现在是编辑模式
                this.urldata = [
                    {url: "achievement/updateAchThesis"},
                    {url: "achievement/updateAchPaject"},
                    {url: "achievement/updateAchPatent"},
                ];

                this.$http.get(this.URL.api + "achievement/querybytypeid/" + this.$route.query.parenttype).then(res => {
                    self.resultType = res.data.data

                    //根据id查询成果
                  this.$http.get(this.URL.api + "achievement/queryAchById/" + dataid).then(res => {
                        if (res.data.flag) {
                            self.form = res.data.data.ach;
                          self.form.uploadFileList = [];
                          if (res.data.data.files.length !== 0) {
                            for (let i = 0; i < res.data.data.files.length; i++) {
                              self.form.uploadFileList.push(res.data.data.files[i].id)
                                }
                          }

                          if (res.data.data.ach.state === '0') {
                                this.isedit = false
                            this.addtitle = "编辑--"+self.form.title
                            } else {
                                this.isedit = true
                            this.addtitle = "查看--"+self.form.title
                            }
                            this.isorganization();
                        }
                    })
                }).catch(res => {
                })


            }


          this.form.uid = this.$cookie.get("userid");
            this.$http.get(this.URL.api + "achievement/queryalltype").then(res => {
                if (self.$route.query.id == null)
                    this.resultType = res.data.data.type

                this.grades = res.data.data.grades

            }).catch(res => {
            })


            console.log(this.UserInfo.getUserInfo().uid)
            console.log(self.$route.query.id)
            self.$http.post(self.URL.api + "upload/selAllFileUrlByUserId", self.qs.stringify(
                {userId: this.UserInfo.getUserInfo().uid,taskId:self.$route.query.id==undefined?"add":self.$route.query.id}))
                .then(function (response) {
                    console.log(response)
                    self.imgList = response.data.data;
                    self.fileList = self.imgList;
                })
                .catch(function (error) {
                });


        }
    }
</script>
